import React, { useState } from 'react';
import { Popconfirm, Tooltip } from 'antd';
import PropTypes from 'prop-types';

// 解决删除按钮需要气泡确认框, 又需要气泡提示框, 两者会冲突
const ButtonPopconfirmAndToolTip = props => {
    const { children, tooltipTitle, disabled, ...otherProps } = props;
    const [visible, setVisible] = useState();

    if (!children) {
        return null;
    }

    const childrenWithProps = React.Children.map(children, child => {
        if (React.isValidElement(child)) {
            return React.cloneElement(child, { disabled });
        }
        return child;
    });
    return (
        <Popconfirm onVisibleChange={setVisible} disabled={disabled} {...otherProps}>
            <Tooltip placement="top" title={tooltipTitle} overlayStyle={visible ? { display: 'none' } : null}>
                {childrenWithProps}
            </Tooltip>
        </Popconfirm>
    );
};

ButtonPopconfirmAndToolTip.propTypes = {
    tooltipTitle: PropTypes.any.isRequired,
    disabled: PropTypes.bool
};
ButtonPopconfirmAndToolTip.defaultProps = {
    disabled: false
};
ButtonPopconfirmAndToolTip.displayName = 'ButtonPopconfirmAndToolTip';

export default ButtonPopconfirmAndToolTip;
